<template>
    <div class="login">
        <!-- 头部 - NavBar -->
    <van-nav-bar title="会员登录" left-arrow @click-left="$router.go(-1)"/>
        <!-- 主题 -->
    <div class="content">
        <div class="title">
            <h2>手机号登录</h2>
            <p>未注册的手机号登录后将自动注册</p>
        </div>
        <div class="inp">
            <ul>
                <li>
                    <input v-model="mobile" type="text" placeholder="请输入手机号码" >
                </li>
                <li>
                    <input v-model="picCode" type="text" placeholder="请输入图形验证码">
                    <span class="img"><img v-if="picUrl" :src="picUrl" alt="" @click="getPicCode"></span>
                </li>
                <li>
                    <input v-model="msgCode" type="text" placeholder="请输入短信验证码" ref="msgCodeInp">
                    <button class="getCode" @click="getCode" >
                      {{ second === countDownTime ? '获取验证码' : second +'秒后重新发送'}}
                    </button>
                </li>
            </ul>
        </div>
        <div class="login">
            <button @click="login" class="loginBtn">登录</button>
        </div>
    </div>
    </div>
</template>

<!--
    接口文档：https://apifox.com/apidoc/shared-12ab6b18-adc2-444c-ad11-0e60f5693f66/doc-2221080
    演示地址：http://cba.itlike.com/public/mweb/#/
    基地址：http://cba.itlike.com/public/index.php?s=/api/
我们会使用 axios 来请求**后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址,请求响应拦截器等等)
一般项目开发中, 都会对 axios 进行基本的**二次封装, 单独封装到一个模块中, 便于使用
-->
<script>
import '@/style/less/login.less'
import { getPicCode, getMsgCode, codeLogin } from '@/api/login'
import router from '@/router'
export default {
  name: 'LoginIndex',
  data () {
    return {
      mobile: '', // 手机号码
      picCode: '', // 用户输入的图形验证码
      pickKey: '', // 将来请求传递的图形验证码唯一标识
      picUrl: '', // 存储请求渲染的图片地址
      countDownTime: 60, // 倒计时总秒数
      second: 60, // 当前秒数，开启定时器 second--
      timer: null, // 定时器id
      msgCode: '' // 短信验证码
    }
  },
  async created () {
    this.getPicCode()
  },
  methods: {
    // 获取图形验证码
    async getPicCode () {
      const { data: { base64, key } } = await getPicCode()
      this.picUrl = base64 // 存储地址
      this.pickKey = key // 唯一标识
    },

    // 校验 手机号 图形验证码
    // 通过 return true
    // 不通过 return false
    validFn () {
      // 校验 手机号
      if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
        this.$toast('请输入正确的手机号码')
        this.phoneNumber = ''
        return false
      }
      // 校验 图形验证码
      if (!/^\w{4}$/.test(this.picCode)) {
        this.$toast('请输入正确的图形验证码')
        this.picCode = ''
        this.getPicCode()
        return false
      }

      return true
    },

    // 获取短信验证码
    async getCode () {
      // 校验 手机号 图形验证码
      if (this.validFn()) {
        // 发送请求
        await getMsgCode(this.picCode, this.pickKey, this.mobile)
        this.$toast('发送成功，请注意查收')
        // 短信验证码输入框获取焦点
        this.$refs.msgCodeInp.focus()

        // 当前定时器没有开着，且 second === countDownTime (秒数归位了)，才可以倒计时
        if (!this.timer && this.second === this.countDownTime) {
        // 开启定时器
          this.timer = setInterval(() => {
            this.second--

            if (this.second <= 0) {
              clearInterval(this.timer)
              this.timer = null // 重置定时器id
              this.second = this.countDownTime // 归位
            }
          }, 1000)
        }
      }
    },

    // 登录验证
    async login () {
      if (!this.validFn()) return
      if (!/^\d{6}$/.test(this.msgCode)) {
        this.$toast('请输入正确的短信验证码')
        this.msgCode = ''
        return
      }
      const res = await codeLogin(this.mobile, this.msgCode)
      this.$store.commit('user/setUserInfo', res.data)
      this.$toast('登录成功')
      // 判断地址栏有无回跳地址
      // 1.有，登录后则回跳
      // 2.没有，登录后则跳转首页
      const url = this.$route.query.backUrl || '/'
      router.replace(url)
    }
  },
  destroyed () {
    // 离开页面 清除倒计时
    clearInterval(this.timer)
  }
}
</script>

<style lang="less" scoped>

</style>
